<template>
  <el-tabs v-model="activeName" :tab-position="'left'"  @tab-click="handleClick">
    <el-tab-pane :label="$t('knowledgeTest.globalSearch')" name="first">
      <GlobalSearch v-if="activeName == 'first'"/>
    </el-tab-pane>
    <el-tab-pane :label="$t('knowledgeTest.automaticDetection')" name="second">
      <AutomaticDetection v-if="activeName == 'second'"/>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import GlobalSearch from "./globalSearch.vue";
import AutomaticDetection from "./automaticDetection.vue";
export default {
  components: {GlobalSearch, AutomaticDetection},
  data() {
    return {
      activeName: 'first'
    }
  }
}
</script>
<style lang="scss" scoped>
/deep/ .is-active {
  //background: #0045c8 !important;
  //color: #fff !important;
  //border-radius: 5px 0 0 5px !important;
  background-color: #E6F2FE !important;
  color: #333 !important;
  border-radius: 0 !important;
  height: 60px;
  line-height: 60px;
  padding: 0 !important;
  text-align: center !important;
}
/deep/ .el-tabs__item {
  //border-radius: 5px 0 0 5px;
  //background: #e9e9eb;
  height: 60px;
  color: #333;
  padding: 0 !important;
  text-align: center !important;
  line-height: 60px !important;
}
/deep/ .el-tabs__content {
  overflow: scroll;
  height: 100% !important;
}
/deep/.el-tabs__header {
  width: 120px;
  .el-tabs__nav-wrap {
    padding-left: 0 !important;
  }
}
</style>